<template>
    <div class="tc-left pr10 fl">
        <ul class="clearfix uiTab1 mb5 j_outerHeight">
            <!-- <li class="col-md-3 fl uiTab1-active"><a href="javascript:">项</a></li> -->
        </ul>
        <div class="daily_title j_outerHeight">
            <ul class="clearfix">
                <li class="title_cur" data-title="全部">全</li>
                <!-- <li data-title="不超过10个字是不会出现的" data-title-length="10">S</li>
            <li data-title="我的背景色是蓝色的" data-title-color="#3385ff">Z</li>
            <li class="title_not_allowed">G</li>
            <li style="float:right;">D</li> -->
            </ul>
        </div>
        <div class="contentbox">
            <table class="uiTable j_outerHeight">
                <thead>
                    <tr>
                        <th width="25%">级别</th>
                        <th width="25%" class="tx-center">
                            职务
                        </th>
                        <th width="25%" class="tx-center">
                            职称
                        </th>
                        <th>时间</th>
                    </tr>
                </thead>
            </table>
            <div class="scroll-content thinScroll thinScroll-table" v-loading="loading" v-scrollHeight="36">
                <table class="uiTable uiTable-striped uiTable-hover" id="tab1">
                    <tbody>
                        <tr v-for="(item,index) in leftListData" :key="index" :class="{'tractive':index == trIndex}" @click="siderBarTrclick(index,item)">
                            <td width="25%">{{item.grade}}</td>
                            <td width="25%">{{item.trainRoleName}}</td>
                            <td width="25%">{{item.professional_title}}</td>
                            <td class="cRed">-999+</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="j_outerHeight clearfix tj_bottom">
                <p class="col-md-3" data-title="全部">{{leftListData.length}}</p>
                <p class="col-md-3 cGreen" data-title="正常">0</p>
                <p class="col-md-3 cOrange" data-title="异常">0</p>
                <p class="col-md-3 cRed" data-title="问题">0</p>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { GetAllGradeList } from '../Resources/Api'
export default {
    data () {
        return {
            loading: false,
            trIndex: 0,
            leftListData: [1, 2, 3, 4] // 遍历的数据
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.GetAllGradeListFn()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        siderBarTrclick (index, item) {
            this.trIndex = index
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        },
        GetAllGradeListFn () {
            GetAllGradeList({
                levelType: 0
            }).then(results => {
                this.leftListData = results.data.Body
                this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>
